<template>
  <div>
    <div class="login-header">
      <comp-header class="header">
        <template v-slot:logo>
          <h2
            class="text-white"
            style="
              background-image: url(https://qiniucssjs.gracg.com/logoimgs/img-horizontal-black.png);
            "
          >
            <router-link to="/"></router-link>
          </h2>
        </template>
        <template v-slot:logo-right>
          <div class="step">|</div>
          <h6 style="padding: 5px 0 0 10px; font-weight: bold">涂鸦王国</h6>
        </template>
        <template v-slot:text>
          <router-link to="/login/l1/gracg" class="login text-dark"
            >登录</router-link
          >
          <router-link to="/login/l2/reg" class="register text-dark"
            >注册</router-link
          >
        </template>
      </comp-header>
    </div>
    <div class="w-100 border" style="background-color: #f8f9fa">
      <div class="w">
        <div class="d-flex justify-content-end align-items-center form">
          <div class="d-flex mt-5 mb-5 rounded shadow-sm border bg-white">
            <router-view />
          </div>
        </div>
      </div>
    </div>
    <div class="bt-white mb-4 mt-4">
      <div class="w">
        <div style="font-size: 14px; color: #999">Copyright @ 2019涂鸦王国</div>
      </div>
    </div>
  </div>
</template>

<script>
import compHeader from "../components/comp-header.vue";
export default {
  components: { compHeader },
};
</script>

<style lang="less" scoped>
@import "../assets/reset";
.login-header {
  height: 60px;
}
.form {
  height: 500px;
  > div {
    width: 400px;
    height: 400px;
  }
}
</style>